<template>
  <div class="q-pa-md" style="max-width: 350px">
    <t-list bordered class="rounded-borders">
      <t-expansion-item>
        <template v-slot:header>
          <t-item-section avatar>
            <t-avatar icon="bluetooth" color="primary" text-color="white" />
          </t-item-section>

          <t-item-section> Bluetooth technology </t-item-section>

          <t-item-section side>
            <div class="row items-center">
              <t-icon name="star" color="red" size="24px" />
              <t-icon name="star" color="red" size="24px" />
              <t-icon name="star" color="red" size="24px" />
            </div>
          </t-item-section>
        </template>

        <t-card>
          <t-card-section>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem,
            eius reprehenderit eos corrupti commodi magni quaerat ex numquam,
            dolorum officiis modi facere maiores architecto suscipit iste
            eveniet doloribus ullam aliquid.
          </t-card-section>
        </t-card>
      </t-expansion-item>

      <t-separator />

      <t-expansion-item>
        <template v-slot:header="{ expanded }">
          <t-item-section avatar>
            <t-avatar>
              <img src="https://cdn.quasar.dev/img/boy-avatar.png" />
            </t-avatar>
          </t-item-section>

          <t-item-section>
            Item {{ expanded ? 'expanded' : 'collapsed' }}
          </t-item-section>
        </template>

        <t-card>
          <t-card-section>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem,
            eius reprehenderit eos corrupti commodi magni quaerat ex numquam,
            dolorum officiis modi facere maiores architecto suscipit iste
            eveniet doloribus ullam aliquid.
          </t-card-section>
        </t-card>
      </t-expansion-item>

      <t-separator />

      <t-expansion-item>
        <template v-slot:header>
          <t-item-section avatar>
            <t-icon color="purple" name="signal_wifi_off" />
          </t-item-section>

          <t-item-section> Wifi settings </t-item-section>
        </template>

        <t-card>
          <t-card-section>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem,
            eius reprehenderit eos corrupti commodi magni quaerat ex numquam,
            dolorum officiis modi facere maiores architecto suscipit iste
            eveniet doloribus ullam aliquid.
          </t-card-section>
        </t-card>
      </t-expansion-item>
    </t-list>
  </div>
</template>
